import React, { Component } from 'react'
import {shallowEqual} from '@/utils/shallow'

/*
  由于React中的PureComponent使用了浅比较，这种浅比较针对于对象而言只要对象中的地址引用不一样他就调用了render进行了
  渲染，但是这种情况还有一种现象，两个对象的引用不一样，但是内容又一摸一样，这种我们如果向提高它性能，需要比较对象中堆
  堆内存空间中对象中属性的值是否一致，就需要自己手动去编写比较的方法了
*/

export default class App extends Component {
  shouldComponentUpdate(nextProps,nextState){
    //两个对象中的属性如果不一样，就让它渲染，如果一样就不让它渲染
    return !shallowEqual(nextState.user,this.state.user)
  }
  constructor(){
    super()
    this.state={
      user:{
        name:'Giles',
        age:39
      }
    }
  }
  render() {
    console.log('--------render---------');
    return (
      <div>
         <div>{JSON.stringify(this.state.user)}</div>
         <button onClick={()=>{
           //产生了一个新对象
           const newuser={
            name:'Giles',
            age:39
           }
           this.setState({
             user:newuser
           })

         }}>更新</button>
      </div>
    )
  }
}
